html,body {
	font-size: 13px;
	overflow: hidden;
	background: transparent;
	font-family: "Roboto",Arial,Helvetica,sans-serif;
}

#displayLogo {
	top: 75px;
	right: 75px;
	width: 101px;
	height: 78px;
	opacity: 0.5;
	position: absolute !important;
	background: url("images/logo.png") no-repeat;
}

#displayHud {
	right: 50px;
	bottom: 50px;
	display: none;
	min-width: 400px;
	max-width: 400px;
	position: absolute !important;
}

#displayTop {
	float: right;
	min-width: 400px;
	max-width: 400px;
	text-align: right;
	padding-right: 10px;
}

#displayMiddle {
	float: right;
	color: #c6c6c6;
	min-width: 400px;
	max-width: 400px;
	text-align: right;
	letter-spacing: 0.5px;
	padding: 10px 10px 20px;
	text-shadow: 1px 1px #000;
}

#displayMiddle s {
	opacity: 0.75;
	padding: 0 10px;
	text-decoration: none;
}

#displayBottom {
	float: right;
	min-width: 400px;
	max-width: 400px;
}

svg {
	margin-top: -4px;
	margin-left: -5px;
	position: absolute;
}



.healthBackground {
	float: right;
	width: 28px;
	height: 28px;
	margin-right: 5px;
	position: relative;
	border-radius: 100%;
	border: 4px solid rgba(116,197,121,0.25);
}

.healthDisplay {
	stroke: #5dab61;
	stroke-width: 4;
	margin-left: 5px;
	fill: transparent;
	position: absolute;
	stroke-dasharray: 100;
	stroke-dashoffset: 0;

	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	transition: all 2s;
}

.armourBackground {
	float: right;
	width: 28px;
	height: 28px;
	margin-right: 5px;
	position: relative;
	border-radius: 100%;
	border: 4px solid rgba(163,142,192,0.25);
}

.armourDisplay {
	stroke: #856baa;
	stroke-width: 4;
	margin-left: 5px;
	fill: transparent;
	position: absolute;
	stroke-dasharray: 100;
	stroke-dashoffset: 50;

	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	transition: all 2s;
}

.waterBackground {
	float: right;
	width: 28px;
	height: 28px;
	margin-right: 5px;
	position: relative;
	border-radius: 100%;
	border: 4px solid rgba(115,170,231,0.25);
}

.waterDisplay {
	stroke: #4c89cd;
	stroke-width: 4;
	margin-left: 5px;
	fill: transparent;
	position: absolute;
	stroke-dasharray: 100;
	stroke-dashoffset: 50;

	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	transition: all 2s;
}

.foodBackground {
	float: right;
	width: 28px;
	height: 28px;
	margin-right: 5px;
	position: relative;
	border-radius: 100%;
	border: 4px solid rgba(242,155,111,0.25);
}

.foodDisplay {
	stroke: #dc7744;
	stroke-width: 4;
	margin-left: 5px;
	fill: transparent;
	position: absolute;
	stroke-dasharray: 100;
	stroke-dashoffset: 50;

	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	transition: all 2s;
}

.stressBackground {
	float: right;
	width: 28px;
	height: 28px;
	margin-right: 5px;
	position: relative;
	border-radius: 100%;
	border: 4px solid rgba(206,132,174,0.25);
}

.stressDisplay {
	stroke: #c45895;
	stroke-width: 4;
	margin-left: 5px;
	fill: transparent;
	position: absolute;
	stroke-dasharray: 100;
	stroke-dashoffset: 50;

	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	transition: all 2s;
}

.oxigenBackground {
	float: right;
	width: 28px;
	height: 28px;
	margin-right: 5px;
	position: relative;
	border-radius: 100%;
	border: 4px solid rgba(151,166,193,0.25);
}

.oxigenDisplay {
	stroke: #7d95c2;
	stroke-width: 4;
	margin-left: 5px;
	fill: transparent;
	position: absolute;
	stroke-dasharray: 100;
	stroke-dashoffset: 50;

	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	transition: all 2s;
}

.voiceBackground {
	float: right;
	width: 28px;
	height: 28px;
	position: relative;
	border-radius: 100%;
	border: 4px solid rgba(179,165,12,0.25);
}

.voiceDisplay {
	stroke: #c4b408;
	stroke-width: 4;
	margin-left: 5px;
	fill: transparent;
	position: absolute;
	stroke-dasharray: 100;
	stroke-dashoffset: 50;

	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	transition: all 2s;
}

.middleIcon {
	color: #999;
	width: 28px;
	height: 22px;
	padding: 6px 0 0;
	background: #222;
	position: absolute;
	border-radius: 100%;
	text-align: center;

	background-size: 86% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

#mph {
	float: right;
	color: #939393;
	font-size: 11px;
	font-weight: 700;
	padding-left: 20px;
	letter-spacing: 0.5px;
	text-shadow: 1px 1px #000;
}

#gasoline {
	float: right;
	color: #939393;
	font-size: 11px;
	font-weight: 700;
	padding-left: 15px;
	letter-spacing: 0.5px;
	text-shadow: 1px 1px #000;
}

#gasoline s, #mph s {
	color: #e5e5e5;
	font-size: 28px;
	text-decoration: none;
	font-family: "Jura",sans-serif;
}